<template>
  <div class="app-container customer-div">
    <div style="margin-top: 20px">
      <!--搜索-->
      <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
        <el-form-item label="分类名称：">
            <el-input v-model="listQuery.keywords"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="getList()"
            type="primary">
            查询
          </el-button>
          <el-button
                @click="showTracking('add',null)"
                type="primary">
          新增
        </el-button>

        </el-form-item>
      </el-form>
    </div>

    <!--数据列表-->
    <div class="table-container">
      <el-table
        v-loading="listLoading"
        :data="list"
        border
        style="width: 100%; margin-top: 20px">
        <el-table-column
                align="center"
                label="分类名称">
            <template slot-scope="scope">
                {{scope.row.className}}
            </template>
        </el-table-column>
        <el-table-column
          prop="departmentNames"
          label="查看权限"
          align="center">
          <template slot-scope="scope">
            {{scope.row.departmentIds == '' ? '全公司' : scope.row.departmentNames}}
          </template>
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="更新时间"
          align="center">
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="showTracking('edit',scope.row)">编辑
            </el-button>
            <el-button
                    type="text"
                    size="mini"
                    @click="toDetail(scope.row)">内容管理
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="delRow(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--新增/编辑文档栏目-->
    <el-dialog
      :close-on-click-modal="false"
      :title="title"
      :beforeClose="handleClose"
      :visible.sync="dialogVisible"
      width="600px">
      <el-form :model="fileForm" size="mini" label-width="120px" :rules="rules" ref="fileForm">
        <el-form-item label="分类名称：" prop="className">
          <el-input v-model="fileForm.className" ></el-input>
        </el-form-item>
        <el-form-item label="分类描述：">
          <el-input v-model="fileForm.classDesc" type="textarea" :rows="2" :autosize="{ minRows: 2, maxRows: 6}"></el-input>
        </el-form-item>
        <el-form-item label="查看权限：" prop="jurisdiction">
          <el-radio-group v-model="fileForm.jurisdiction">
            <el-radio label="all">全公司</el-radio>
            <el-radio label="department">部门</el-radio>
            <el-form-item label="" prop="departmentIds" label-width="0" style="display: inline-block"  v-if="fileForm.jurisdiction=='department'">
              <el-cascader
                      style="width:272px"
                      :props="props"
                      v-model="fileForm.departmentIds"
                      :options="data"></el-cascader>
            </el-form-item>

          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
    import {getDeptList,articleClassList,articleEditClass,articleDelClass} from '@/api/management'
    import {formatDate} from '@/utils/date';
    import store from '@/store'
    import { mapGetters } from 'vuex'
    const defaultFileForm = {
        classId:0,
        className:'',
        classDesc:'',
        jurisdiction:'all',
        departmentIds:''
    };
    export default {
        name: "index",
        data(){
            return{
                roles:store.getters.roles ? store.getters.roles : [],
                listQuery:{
                      keywords:'',
                  },
                list:[],
                count:0,
                listLoading:false,
                dialogVisible:false,
                fileForm:JSON.parse(JSON.stringify(defaultFileForm)),
                rules:{
                    className:[{required: true, message: '请输入分类名称', trigger: 'blur'},],
                    jurisdiction:[{required: true, message: '请选择查看权限', trigger: 'change'},],
                    departmentIds:[{required: true, message: '请选择部门', trigger: 'change'},],
                },
                title:'',
                btnLoading:false,
                data : [],
                props:{
                  multiple: true,
                  value:'departmentId',
                  label:'departmentName',
                  children:'children',
                  emitPath:false
                }

            }
        },
        computed: {
          ...mapGetters([
            'name',
            'mobile',
            'userId'
          ]),


        },
        created() {
            this.getList();
            this.getBuMenList();

        },
        filters: {
            formatTime(time) {
                let date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd')
            },
        },
        methods:{
          //获取部门列表
          getBuMenList(){
            this.dataLoading = true;
            getDeptList().then((res)=>{
              this.data = this.forTree(res);;
              this.dataLoading = false
            })
          },
          //去除不要的children
          forTree(list){
            let newList = list;
            if(newList.length){
              for (let i = 0; i<newList.length; i++){
                if(newList[i].children && newList[i].children.length > 0){
                  this.forTree(newList[i].children)
                }else{
                  delete newList[i].children;
                }
              }
              return newList
            }
          },

            //去详情页 query:{id:item.customerId}
            toDetail(item){
              this.$router.push({name:'filesDetail',query:{classId:item.classId}})
            },


            //获取文档分类列表
            getList(){
                this.listLoading = true;
                let data = JSON.parse(JSON.stringify(this.listQuery));
                articleClassList(data).then((res)=>{
                    this.list = res;
                    this.listLoading = false;
                }).catch(()=>{
                    this.listLoading = false;
                })
            },
            //删除文档
            delRow(item){
                this.$confirm('确定删除该文档分类吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                  articleDelClass({classId:item.classId}).then(()=>{
                        this.getList();
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            //显示新增/编辑
            showTracking(type,item){
                this.title = type == 'add' ? '新增分类' : '编辑分类';
                this.dialogVisible = true;
                if(type=='add'){
                    this.fileForm = JSON.parse(JSON.stringify(defaultFileForm));
                }else{
                    this.fileForm.classId = item.classId;
                    this.fileForm.className = item.className;
                    this.fileForm.classDesc = item.classDesc;
                    this.fileForm.departmentIds = item.departmentIds.split(",");
                    this.fileForm.jurisdiction = item.departmentIds == '' ? 'all' : 'department';
                    console.log("this.fileForm",this.fileForm)
                }
            },

            //关闭弹窗
            handleClose(){
                this.$refs.fileForm.clearValidate();
                this.dialogVisible = false;
                this.btnLoading = false;
            },

            //提交编辑新增
            handleConfirm(){
                this.$refs.fileForm.validate((valid) => {
                    if (valid) {
                        this.btnLoading = true;
                        let data = JSON.parse(JSON.stringify(this.fileForm));
                        data.departmentIds = [];
                        data.departmentIds = this.fileForm.jurisdiction == 'all' ? '' : this.fileForm.departmentIds.join(",")
                        articleEditClass(data).then((res)=>{
                            this.btnLoading = false;
                            this.handleClose();
                            this.getList();
                        }).catch(()=>{
                          this.btnLoading = false;
                        })
                    }
                })
            },
        },
    }
</script>

<style scoped lang="scss">
  .avatar-uploader{
    margin-bottom:10px;
    display: inline-block;
    width:80px;
    height:80px;
    border:1px solid #DCDFE6;
    text-align: center;
    line-height: 80px;
  }
</style>
